<template>
	<view class="bindPhone">
		<view class="titlePhone">
			<view class="avatar">
				<image class="img" src="@/static/my/toux.jpg"></image>
			</view>
			<text style="font-weight: 700; margin-top: 20rpx; font-size: 30rpx">我型我发</text>
		</view>
		<view class="txtPhone">
			<text style="margin: 50rpx; font-size: 30rpx;">为防止账号丢失以便找回,请绑定手机号</text>
			<button :disabled="disabled" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				class="txtBtn">使用微信号码快速绑定</button>
			<view style="font-size: 30rpx">
				<label class="radio">
					<radio value="r1" @click="checkedBox" :checked="checked" />
					<view style="display: inline-block; color: rgba(150, 150, 150);" class="">已阅读并同意<text
							style="color: yellowgreen;">xxxxxx</text>协议</view>
				</label>
			</view>
		</view>
		<view class="otherZh" @click="otherZh">
			使用其他账号
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		wxLoginAuthorization
	} from '/api/bindingPhone.js'

	const disabled = ref(false) //按钮是否禁用
	const checked = ref(true) //是否勾选
	const getCode = ref('') //存code
	const getEncryptedData = ref('') //解密
	const getIv = ref('') //解密
	const wxCode = ref('') //解密
	const checkedBox = () => {
		checked.value = !checked.value
	}

	const getPhoneNumber = (res) => {
		getCode.value = res.detail.code
		getEncryptedData.value = res.detail.encryptedData
		getIv.value = res.detail.iv
		
		if (checked.value == false) {
			disabled.value = false
			uni.showToast({
				title: "请勾选协议",
				icon: "none"
			})
		} else {
			weChatLogin() //调用方法
			uni.navigateTo({
				url: "../my/settings"
			})
		}

	}
	
	const weChatLogin = () => {
		uni.login({
		  provider: 'weixin', //使用微信登录
		  success: function (res) {
			  wxCode.value=res.code
			let params = {
				"code": wxCode.value,
				"encryptedData": getEncryptedData.value,
				"iv": getIv.value,
			}
			wxLoginAuthorization(params).then(res => {
				if(res.data == true){
					uni.navigateTo({
						url:"../my/settings"
					})
				}else{
					return false
				}
			})
		  }
		});
		
	}
	const otherZh = () => {
		uni.showToast({
			title:"正在开发中...",
			icon:"none"
		})
		// uni.navigateTo({
		// 	url: '../bindingPhone/otherPhone'
		// })
	}
</script>

<style scoped lang="scss">
	.bindPhone {
		width: 100%;
		height: 100vh;
		padding: 40rpx;

		.titlePhone {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 120rpx;
			align-items: center;

			.avatar {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: block;
				}
			}
		}

		.txtPhone {
			margin-top: 100rpx;
			height: 400rpx;

			.txtBtn {
				margin-top: 50rpx;
				margin-bottom: 50rpx;
				border-radius: 30rpx;
				color: whitesmoke;
				background-color: rgba(255, 140, 140)
			}
		}

		.otherZh {
			position: fixed;
			bottom: 50rpx;
			width: 100%;
			height: 50rpx;
			text-align: center;
			margin-top: 150rpx;
			color: rgba(150, 150, 150);
		}
	}
</style>